import { useState } from 'react';
import Image from 'next/image';
import Uppy from '@uppy/core';
import XHRUpload from '@uppy/xhr-upload';
import cn from '@uppy/locales/lib/zh_CN';
// import Webcam from '@uppy/webcam';
// import ScreenCapture from '@uppy/screen-capture';
// import ImageEditor from '@uppy/image-editor';
// import OneDrive from '@uppy/onedrive';
// import Instagram from '@uppy/instagram';
import { DashboardModal, useUppy } from '@uppy/react';
import '@uppy/core/dist/style.css';
import '@uppy/dashboard/dist/style.css';
import '@uppy/progress-bar/dist/style.css';
import '@uppy/status-bar/dist/style.css';
import { useToasts } from '@geist-ui/react';
import { Result } from '../pages/api/upload.api';

/**
 * 文件上传
 */
export default function Uploader({ file, onClose }: { file: string; onClose(s: string): void; }) {
	const endpoint = '/api/upload';
	const getfile = '/api/getfile/';
	const [filepath, setfilepath] = useState(file);
	const [, toast] = useToasts();
	const [open, setopen] = useState(false);
	const uppy = useUppy(() => {
		const uppy = Uppy({
			allowMultipleUploads: false,
			autoProceed: true,
			debug: true,
			restrictions: {
				maxFileSize: 10737418240,	// 10gb 1024=1kb 1024*1024=1mb 1024*1024*1024=1gb
				maxNumberOfFiles: 1,
				minNumberOfFiles: 1,
				allowedFileTypes: ['application/x-7z-compressed', 'application/zip', 'application/x-rar', '.7z', '.zip', '.rar']
			},
			locale: cn
		});
		uppy.use(XHRUpload, {
			fieldName: 'file',
			formData: true,
			method: 'PUT',
			endpoint,
			timeout: 600000	// 10分钟 1000 * 60 * 10
		});
		uppy.on('complete', (result) => {
			// 以下代码可将上传的内容变成下载链接,放在页面上.
			const [success] = result.successful;
			if (success) {
				const ret = success.response.body as Result;
				if (ret.ok) {
					toast({
						text: '上传成功',
						type: 'success'
					});
					const file = getfile + ret.fileid;
					setfilepath(file);
					// uppy.close();
					setopen(false);
					onClose(file);
				} else {
					toast({
						text: '上传失败',
						type: 'error'
					});
					setfilepath('');
				}
			}
		});
		uppy.on('error', () => {
			toast({
				text: '上传失败',
				type: 'error'
			});
			setfilepath('');
		});
		return uppy;
	});
	return <>
		<div className='cls001'>
			<div>
				<div className='cls002'>
					{filepath ? <a href={filepath} download><div>
						<Image width={123} height={105} src='/images/u1942.png' />
						<Image width={33} height={26} src='/images/u1941.png' />
					</div></a> : <div className='cls004'>
						<span className='cls003'>暂无上传文件</span>
					</div>}
				</div>
				<input type='button' value='上传文件...' onClick={() => {
					setopen(true);
				}} />
			</div>
		</div>
		<DashboardModal closeModalOnClickOutside uppy={uppy} open={open}
			onRequestClose={() => {
				setopen(false);
			}} />
		<style jsx>{`
.cls004{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
}
.cls003{
}
.cls002{
border-style: solid;
border-width: 1px;
display: block;
width: 158px;
height: 105px;
vertical-align: middle;
border-color: #1769d4;
margin-left:1.5rem;
}
.cls001{
margin-top: 50px;
display: flex;
justify-content: center;
vertical-align: bottom;
}

input{
margin:1rem;
padding-top:10px;
padding-bottom:10px;
padding-left:50px;
padding-right:50px;
border-style: none;
background-color: #202523a1;
color: #ffd00071;
border-radius: 15px;
transition: all 800ms;
}
input:hover{
background-color: #499b41a1;
color: #ffd000ab;
}
`}</style>
	</>;
}
